<template>


    <el-form :model="form" label-width="auto">
        <el-form-item label="菜单名称">
            <el-input v-model="form.menuName" />
        </el-form-item>
        <el-form-item label="url">
            <el-input v-model="form.url" />
        </el-form-item>
        <el-form-item label="path">
            <el-input v-model="form.path" />
        </el-form-item>
        <el-form-item label="level">
            <el-input v-model="form.level" />
        </el-form-item>




        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="cancle">取消</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup name='edit'>
import { ref, reactive } from "vue";
import { ElMessageBox, ElNotification } from 'element-plus'

//用于保存的API
import { saveOrUpdate, getById, } from '@/api/permission/menu/index'
import { onMounted } from "vue";


//列表页传递的属性 
//closeDialog 用于关闭dialog 
// editId 编辑的id
const { closeDialog, editId } = defineProps(['closeDialog', 'editId'])




//表单数据
const form = ref({
    menuName: ''
})

//保存按钮 点击事件
const onSubmit = () => {
    saveOrUpdate(form.value).then(success => {
        ElNotification({
            title: '消息',
            type: 'success',
            message: "保存成功",
        })

        //调用父组件中的 函数用于关闭 dialog 和更新查询结果
        closeDialog(true)
    })
}

const cancle = () => {
    //调用父组件中的 函数用于关闭 dialog 和更新查询结果
    closeDialog(false)
}


// 当修改操作的到时候 根据主键查询
function pageGetById() {

    getById(editId).then(user => {
        form.value = user
    })

}





onMounted(() => {

    //如果修改
    if (editId) {
        pageGetById()
    }


})


</script>

<style scoped></style>